import React, { useState } from 'react';
import { Col, Row, Select } from 'antd';
import { useDictionary } from '@/pages/WorkFlow/hooks/useDictionary';

const { Option } = Select;

const LeaveReason = ({ value = {}, onChange, disabled }) => {
    const [reasonMain, setReasonMain] = useState({});
    const [changeValue, setChangeValue] = useState({});

    const { loading: leaveSubTypeLoading, dictionary: leaveSubReasons } = useDictionary({
        code: reasonMain && reasonMain.remark
    });

    const { loading: leaveTypeLoading, dictionary: leaveReasons } = useDictionary({
        code: 'reasonType'
    });

    const handleOnchange = (type, values) => {
        let o = {};

        if (type === 'reasonType') {
            const res = leaveReasons.find(item => item.dictValue === values.key);
            setReasonMain(res);
            o[type] = values;
        } else {
            o = { ...changeValue, [type]: values };
        }

        setChangeValue(o);
        if (onChange) {
            onChange(o);
        }
    };

    return (
        <Row gutter={24}>
            <Col span={12}>
                <Select
                    loading={leaveTypeLoading}
                    labelInValue
                    value={value?.reasonType}
                    onChange={v => handleOnchange('reasonType', v)}
                    placeholder="请选择"
                    disabled={disabled}
                >
                    {leaveReasons.map(reason => (
                        <Option key={reason.dictValue} value={reason.dictValue}>
                            {reason.dictName}
                        </Option>
                    ))}
                </Select>
            </Col>
            <Col span={12}>
                <Select
                    labelInValue
                    placeholder="请选择"
                    value={value?.leaveSubReasons}
                    loading={leaveSubTypeLoading}
                    onChange={v => handleOnchange('leaveSubReasons', v)}
                    disabled={disabled}
                >
                    {leaveSubReasons.map(reason => (
                        <Option key={reason.dictValue} value={reason.dictValue}>
                            {reason.dictName}
                        </Option>
                    ))}
                </Select>
            </Col>
        </Row>
    );
};
export default LeaveReason;
